<style>
    .color-item{
        text-align: center;
        width:18%;
        margin: 10px 1%;
        padding: 10px 3px;
        float:left;
        color:#fff;
        word-break: break-all;
        border-radius: 5px;
    }
</style>
<div class='title'>基础样式类</div>
<div class='text indent'>
    JUI 提供了一套基础样式类，本节从样式类，文字类、颜色类、边距类和组件样式类依次做介绍：
    <div class="list">
        <div class='link' jump-to='style'>1.样式类 <i class="icon icon-double-angle-right"></i></div>
        <div class='link' jump-to='text'>2.文字类 <i class="icon icon-double-angle-right"></i></div>
        <div class='link' jump-to='color'>3.颜色类<i class="icon icon-double-angle-right"></i></div>
        <div class='link' jump-to='margin'>4.边距类 <i class="icon icon-double-angle-right"></i></div>
        <div class='link' jump-to='component'>5.组件样式 <i class="icon icon-double-angle-right"></i></div>
    </div>
</div>

<div class='title' jump-des="style">1.样式类</div>
<div class='sub'>
    <div class='text'>
        JUI 对一些常用的比较公共的样式写成了一个个的独立的类，开发者可以省去一些重复的代码工作，有以下多种：
        <div class="list">
            <div>clearfix <span class="light-text">(主要用于控制float的元素的父元素的高度)</span></div>
            <div>hide <span class="light-text">(隐藏元素)</span></div>
            <div>show <span class="light-text">(显示元素)</span></div>
            <div>f-left <span class="light-text">(float:left)</span></div>
            <div>f-right <span class="light-text">(float:right)</span></div>
            <div>t-left <span class="light-text">(左端对齐)</span></div>
            <div>t-right <span class="light-text">(右端对齐)</span></div>
            <div>t-center <span class="light-text">(中间对齐)</span></div>
            <div>m-center <span class="light-text">(margin:0 auto)</span></div>
            <div>v-top <span class="light-text">(vertical-align: top)</span></div>
            <div>v-middle <span class="light-text">(vertical-align: middle)</span></div>
            <div>v-bottom <span class="light-text">(vertical-align: bottom)</span></div>
            <div>relative <span class="light-text">(position:relative)</span></div>
            <div>absolue <span class="light-text">(position:absolue)</span></div>
            <div>fixed <span class="light-text">(position:fixed)</span></div>
            <div>w-full <span class="light-text">(宽度100%)</span></div>
            <div>w-auto <span class="light-text">(宽度auto)</span></div>
            <div>h-full <span class="light-text">(高度100%)</span></div>
            <div>h-auto <span class="light-text">(高度auto)</span></div>
            <div>c-disabled <span class="light-text">(cursor:no-drop)</span></div>
            <div>c-pointer <span class="light-text">(cursor:pointer)</span></div>
            <div>unvisible <span class="light-text">(visibility: hidden)</span></div>
            <div>flex-middle <span class="light-text">(利用flex布局的竖直居中)</span></div>
        </div>
    </div>
</div>
<div class='title' jump-des="text">2.文字类</div>
<div class="sub">
    <div class='text'>
        JUI中的默认字体是微软雅黑， JUI对字体的大小和样式做了一些规定：
        <div class="list">
            <div>bold <span class="light-text">(粗体)</span></div>
            <div>italic <span class="light-text">(斜体)</span></div>
            <div>underline <span class="light-text">(下划线)</span></div>
            <div>indent <span class="light-text">(缩进两个单位)</span></div>
            <div>txs <span class="light-text">(最小字体：10px)</span></div>
            <div>ts <span class="light-text">(次小字体：13px)</span></div>
            <div>tm <span class="light-text">(默认字体：16px)</span></div>
            <div>tl <span class="light-text">(次大字体：20px)</span></div>
            <div>txl <span class="light-text">(最大字体：30px)</span></div>
        </div>
    </div>
</div>
<div class='title' jump-des="color">3.颜色类</div>
<div class="sub">
    <div class='text'>
        JUI中定义了五种颜色，分别是以下五种。
        <div class="clearfix">
            <div class='color-item bg-success'>成功:#2ac32f</div>
            <div class='color-item bg-normal'>普通:#1da1ff</div>
            <div class='color-item bg-info'>信息:#9e9e9e</div>
            <div class='color-item bg-warn'>警告:#dfa02b</div>
            <div class='color-item bg-error'>危险:#dc5454</div>
        </div>
        对前景色和背景色做了一些定义：
        <div class="list">
            <div>c-success <span class="light-text">(成功前景色)</span></div>
            <div>c-normal <span class="light-text">(普通前景色)</span></div>
            <div>c-info <span class="light-text">(信息前景色)</span></div>
            <div>c-warn <span class="light-text">(警告前景色)</span></div>
            <div>c-error <span class="light-text">(危险前景色)</span></div>
            <div>bg-success <span class="light-text">(成功背景色)</span></div>
            <div>bg-normal <span class="light-text">(普通背景色)</span></div>
            <div>bg-info <span class="light-text">(信息背景色)</span></div>
            <div>bg-warn <span class="light-text">(警告背景色)</span></div>
            <div>bg-error <span class="light-text">(危险背景色)</span></div>
        </div>
    </div>
</div>
<div class='title' jump-des="margin">4.边距类</div>
<div class="sub">
    <div class='text'>
        JUI 分别对上下左右的外边距和内边距的大小进行了一些规定：
        <div>类别有：【p:padding,m:margin】</div> 
        <div>尺寸有：【xs:3px,s:5px,m:10px,l:15px,xl:20px】</div> 
        <div>位置有：【t:top,r:right,l:left,b:bottom】</div> 
        将它们进行一些组合就可以使用，如下表：
        <div class="list">
            <div>pxs,pxs-t,pxs-r,pxs-b,pxs-l </div>
            <div>ps,ps-t,ps-r,ps-b,ps-l </div>
            <div>pm,pm-t,pm-r,pm-b,pm-l</div>
            <div>pl,pl-t,pl-r,pl-b,pl-l</div>
            <div>pxl,pxl-t,pxl-r,pxl-b,pxl-l</div>
            <div>mxs,mxs-t,mxs-r,mxs-b,mxs-l</div>
            <div>ms,ms-t,ms-r,ms-b,ms-l</div>
            <div>mm,mm-t,mm-r,mm-b,mm-l</div>
            <div>ml,ml-t,ml-r,ml-b,ml-l</div>
            <div>mxl,mxl-t,mxl-r,mxl-b,mxl-l</div>
        </div>
    </div>
</div>
<div class='title' jump-des="component">5.组件样式</div>
<div class="sub">
    <div class='title'>组件类</div>
    <div class='text'>
        JUI 中的组件（后面会介绍到）有一些公共的样式：
        <div>颜色：【.success,.normal,.info,.warn,.error】</div> 
        <div>大小：【.xs,.s,.m,.l,.xl】</div> 
        这些类在不同的组件中样式表现各有不同，详细样式请参考后面的章节或读者自行试验。
    </div>
    <div class='title'>组件属性</div>
    <div class='text'>
        JUI 中的组件有一些公共的属性，但是特们并不是每个组件都可用，具体使用请参考后面的章节：
        <div>width：用于控制组件的宽度，缺省单位为px。大部分组件可用。包含 btn,input,switch,date,progress,slider,code。width支持个种单位，没有单位缺省值为px</div> 
        <div>disabled：用于启用或禁用组件，默认为false。大部分组件可用</div> 
        <div>icon：用于给组件添加图标。可以使用的组件有：btn,radio,checkbox,select中option,switch的子元素</div> 
        <div>checked:是否选中。可以使用的组件有：radio,checkbox,switch的子元素</div> 
        还有其他一些属性请参考各组件的文档。
    </div>
</div>
<script>
</script>